<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        .fire-red {
            background-color: #e63946;
        }
        .login-bg {
            background-image: url('https://img.freepik.com/free-photo/firefighter-putting-out-fire_23-2149125207.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .login-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }
        .login-content {
            position: relative;
            z-index: 2;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div id="app">
        <div class="flex min-h-screen">
            <!-- 左侧登录表单区域 -->
            <div class="w-full md:w-1/2 flex items-center justify-center p-8">
                <div class="max-w-md w-full">
                    <div class="text-center mb-10">
                        <a href="index.html" class="inline-block">
                            <img src="https://img.icons8.com/color/48/000000/fire-element.png" alt="Logo" class="h-12 w-12 mx-auto">
                        </a>
                        <h1 class="mt-4 text-3xl font-bold text-gray-800">欢迎登录</h1>
                        <p class="mt-2 text-gray-600">火灾调查知识库平台</p>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-md p-8">
                        <form>
                            <div class="mb-6">
                                <label class="block text-gray-700 text-sm font-medium mb-2">用户名</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-user text-gray-400"></i>
                                    </div>
                                    <input type="text" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="请输入用户名">
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <div class="flex items-center justify-between mb-2">
                                    <label class="block text-gray-700 text-sm font-medium">密码</label>
                                    <a href="#" class="text-sm text-red-600 hover:text-red-700">忘记密码？</a>
                                </div>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-lock text-gray-400"></i>
                                    </div>
                                    <input type="password" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="请输入密码">
                                </div>
                            </div>
                            
                            <div class="flex items-center mb-6">
                                <input type="checkbox" id="remember" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
                                <label for="remember" class="ml-2 block text-sm text-gray-700">记住我</label>
                            </div>
                            
                            <button type="submit" class="w-full py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 font-medium">
                                登录
                            </button>
                        </form>
                        
                        <div class="mt-6 text-center">
                            <p class="text-sm text-gray-600">
                                还没有账号？ <a href="register.html" class="text-red-600 hover:text-red-700 font-medium">立即注册</a>
                            </p>
                        </div>
                        
                        <div class="mt-6">
                            <div class="relative">
                                <div class="absolute inset-0 flex items-center">
                                    <div class="w-full border-t border-gray-300"></div>
                                </div>
                                <div class="relative flex justify-center text-sm">
                                    <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                                </div>
                            </div>
                            
                            <div class="mt-6 grid grid-cols-3 gap-3">
                                <button class="w-full flex items-center justify-center py-2 px-4 border border-gray-300 rounded-md hover:bg-gray-50">
                                    <i class="fab fa-weixin text-green-600 text-xl"></i>
                                </button>
                                <button class="w-full flex items-center justify-center py-2 px-4 border border-gray-300 rounded-md hover:bg-gray-50">
                                    <i class="fab fa-qq text-blue-600 text-xl"></i>
                                </button>
                                <button class="w-full flex items-center justify-center py-2 px-4 border border-gray-300 rounded-md hover:bg-gray-50">
                                    <i class="fas fa-mobile-alt text-gray-700 text-xl"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-8 text-center">
                        <a href="index.html" class="text-sm text-gray-600 hover:text-gray-800">
                            <i class="fas fa-arrow-left mr-1"></i> 返回首页
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 右侧背景图区域 -->
            <div class="hidden md:block md:w-1/2 login-bg">
                <div class="login-content h-full flex flex-col justify-center px-12">
                    <h2 class="text-3xl font-bold text-white mb-6">专业火灾调查知识库平台</h2>
                    <p class="text-xl text-white opacity-90 mb-8">
                        集成火灾调查知识、图谱展示、智能检索、报告生成于一体的综合性平台
                    </p>
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
                                <i class="fas fa-database text-white"></i>
                            </div>
                            <p class="text-white">海量专业知识库</p>
                        </div>
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
                                <i class="fas fa-robot text-white"></i>
                            </div>
                            <p class="text-white">AI智能检索与问答</p>
                        </div>
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
                                <i class="fas fa-file-alt text-white"></i>
                            </div>
                            <p class="text-white">火灾调查报告自动生成</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Vue初始化代码
        const app = Vue.createApp({
            data() {
                return {
                    // 数据
                }
            },
            methods: {
                // 方法
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 